<template>
    <div>
        <ButtonGroup>
        <Button type="primary" @click="Operdata">新增</Button>
        <Button type="error" @click="removes">删除</Button>
      </ButtonGroup>
        <Input v-model="name" placeholder="请输入用户名">
       
        <Button slot="append" icon="ios-search" @click='search'></Button>
    </Input>
    <Table border :columns="columns" :data="data" @on-selection-change="onselectionchange"></Table>
      <Page :total="total" :page-size='pageSize' 
      @on-change="onchange" show-sizer @on-page-size-change="changeon"></Page>

       <Modal
        title="数据操作"
        v-model="operdatamodel"
        class-name="vertical-center-modal">
       

       <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="用户名" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入用户名"></Input>
        </FormItem>

           <FormItem label="性别" prop="password">
                    <RadioGroup v-model="formValidate.password">
                        <Radio label="男" >男</Radio>
                        <Radio label="女" >女</Radio>
                    </RadioGroup>
            </FormItem>

        <FormItem label="年龄" prop="age">
            <Input v-model="formValidate.age" placeholder="请输入年龄"></Input>
        </FormItem>


         <FormItem label="电话号码" prop="contact">
            <Input v-model="formValidate.contact" placeholder="请输入电话号码"></Input>
        </FormItem>


        <FormItem label="地址" prop="add">
            <Select v-model="formValidate.add" placeholder="请选择地址">
                <Option value="江西">江西</Option>
                <Option value="浙江">浙江</Option>
                <Option value="上海">上海</Option>
                <Option value="北京">北京</Option>
                <Option value="湖南">湖南</Option>
                <Option value="湖北">湖北</Option>


            </Select>
        </FormItem>
        
        
       
       
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>

        
        <div slot="footer">
           aa
        </div> 
    </Modal>
    </div>
</template>
<script>

 import {dase} from '../../common/base.js'
    export default {
       mixins:[dase],
        data () {
            return {
              module:'users',
              formValidate: {
                    name: '',
                     password: '',
                     age: '',
                     contact: '',
                     add: '',
                    
                },
                 ruleValidate: {
                    name: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' }
                    ],

                     password: [
                        { required: true, message: '性别不能为空', trigger: 'change' }
                    ],
                    age: [
                        { required: true, message: '年龄不能为空', trigger: 'blur' },
                        
                    ],
                    contact: [
                        { required: true, message: '电话号码不能为空', trigger: 'blur' }
                    ],
                    add: [
                        { required: true,  message: '地址不能为空', trigger: 'change' }
                    ],
                   
                },

                operdatamodel :false,
               
                columns: [
                     {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Name',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                     {
                         title: '性别',
                        key: 'password',
                    },
                     {
                        title:'年龄',
                        key:'age'
                     },
                     {
                       title: '电话号码',
                        key: 'contact'
                     },
                    {
                       title: '地址',
                        key: 'add'
                     },
                    

                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edidata(params);
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
   
    
            }}
            
    }
</script>